<template>
  <!-- 动态class -->
  <!-- 

* :class="{类名: 布尔值}"
* :class="[类名, 类名]"
   -->
  <div>
    <p :class="{ redColor: bool }">moved class make the words became red</p>
    <p class="redColor" :class="colorArr">
      moved class make the words became blue
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool: true,
      colorArr: ["redColor", "blueColor"],
    };
  },
};
</script>

<style scoped>
/* 在style中使用了scoped，则style标签里的css仅作用于当前页面。
css对子组件不生效，可以在子组件的style标签里也使用scoped，
这样可以使一个页面对应自己的css，避免影响到其他页面。 */

.redColor {
  color: red;
}
.blueColor {
  color: blue;
}
</style>
